import $ from "jquery";
import style from "./index.module.less";
import movieUrl from "@/assets/movie.mp4";
import musicUrl from "@/assets/music.mp3";

let isPause = false;

function init() {
  const container = $("<div>").addClass(style.container).appendTo("#app");

  const vdo = $("<video>")
    .prop("src", movieUrl)
    .prop("autoplay", true)
    .prop("loop", true)
    .prop("muted", true)
    .addClass(style.video)
    .appendTo(container);

  const ado = $("<audio>")
    .prop("src", musicUrl)
    .prop("autoplay", true)
    .prop("loop", true)
    .appendTo(container);

    ado.get(0).play();

    $('<h1>').text('花瓣电影').addClass(style.tittle).appendTo(container);

  $(window).on("scroll", function () {
    const scrollTop = document.documentElement.scrollTop;
    const clientHeight = document.documentElement.clientHeight;

    if (scrollTop > clientHeight) {
      if (!isPause) {
        vdo[0].pause();
        ado[0].pause();
      }
      isPause = true;
    } else {
      if (isPause) {
        vdo[0].play();
        ado[0].play();
      }
      isPause = false;
    }
  });
}

init();
